import *as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js'

// 场景
// 创建一个三维场景scene
const scene = new THREE.Scene();
// 给三维添加物体
// 定义一个几何体胶囊体
const geometry=new THREE.CapsuleGeometry(10, 10, 40, 80 );
// 创建材质对象
const material = new THREE.MeshBasicMaterial({
    color:0x00ff00, //红色材质
    transparent:true,  //开启透明
    opacity:0.5 
});
// 创建网格模型表示生活中物体
const mesh = new THREE.Mesh(geometry,material);
mesh.position.set(0,10,0);
// 把物体添加到模型中
scene.add(mesh);   
// 创建一个坐标系坐标轴
const axesHelper = new THREE.AxesHelper(150);
scene.add(axesHelper);

console.log('mesh',mesh);

// 相机
//定义相机输出画布的尺寸
const width =window.innerWidth;
const height=window.innerHeight;
// 定义相机的四个参数
// 创建一个透视投影相机对象
const camera= new THREE.PerspectiveCamera(30,width/height,1,3000);
// 相机位置
camera.position.set(-1000,0,0);
// 相机视线 
// camera.lookAt(0,0,0) //设置坐标原点
camera.lookAt(0,0,0);

// 渲染
//创建渲染器对象WebGL
const renderer = new THREE.WebGLRenderer();
renderer.setSize(width,height);
renderer.render(scene,camera); //执行渲染效果
// 把渲染结果放到canvas面不，也就是所谓的照片
document.body.appendChild(renderer.domElement);


// 轨道控制控件
// 设置相机空间轨道控制器
const controls = new OrbitControls(camera,renderer.domElement);
// 如果OrbitControls改变了相机参数，重新调用渲染器渲染三维场景
controls.addEventListener('change',function()
{
    renderer.render(scene,camera);

})